<script setup lang="ts">
import { modelingUrl } from '@/utils/mappingUrl.js';
import { listByIds } from '@/api/system/oss';
import ResourceList from '../resourceList/index.vue';
import Plan from '../Plan/index.vue';

const { searchList } = defineProps(['modeData', 'searchList']);
const getUrlHandler = (name) => {
  return modelingUrl[name];
};
const emit = defineEmits(['showPopUp', 'handle-select']);
const currentName = ref('');
const currentIndex = ref('');
const resourceList = ref([]);
const item = ref([]);
const fileList = ref([]);
const activeResource = ref<{ data: any; name: number } | null>(null);
const PlanRef = ref();
const showPopUp = (data, name, index) => {
  currentIndex.value = index;
  currentName.value = name;
  resourceList.value = data[name];
  item.value = data;
  activeResource.value = { data, name }; // 记录当前点击项
  emit('showPopUp', data[name], name);
};
const state = ref('');
const querySearch = (queryString, cb) => {
  // 这里是你的搜索逻辑
  const results = queryString ? searchList.filter(createFilter(queryString)) : searchList;
  // 调用回调函数返回建议列表
  cb(results);
};

const createFilter = (queryString) => {
  return (restaurant) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
  };
};

const getColor = computed(() => {
  return (name: string) => {
    return currentName.value == name ? '#1aecff' : '#fff';
  };
});
const openPdf = (url) => {
  PlanRef.value.url = url;
  PlanRef.value.open();
};
const goPop = (item) => {
  emit('handle-select', item);
};
const handleSelect = (item) => {
  emit('handle-select', item);
};
onMounted(async () => {
  const { data } = await listByIds('1889242161710682113');
  fileList.value = data;
});
</script>

<template>
  <el-autocomplete
    class="inline-input"
    v-model="state"
    clearable
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect"
  ></el-autocomplete>
  <div class="blue-box">
    <div class="ziyuan-box" v-for="(item, index) in modeData" :key="index">
      <div class="ziyuan-title">{{ index }}</div>
      <div class="ziyuan-main">
        <div class="resource_item" v-for="(itm, index1) in item" :key="index1" v-show="item" @click="showPopUp(item, index1, index)">
          <img :src="getUrlHandler(index1)" alt="暂无" />
          <div class="resource_info">
            <div class="resource_name" :style="{ color: getColor(String(index1)) }">
              {{ index1 }}
            </div>
            <div class="resource_num">{{ item ? itm.length || 0 : 0 }}个</div>
          </div>
        </div>
        <ResourceList
          v-if="activeResource && currentIndex === String(index)"
          :resource-list="activeResource.data[activeResource.name]"
          :current-name="String(activeResource.name)"
          :item="activeResource.data"
          @go-pop="goPop"
        />
        <div class="empty-box" v-show="!item">暂无数据</div>
      </div>
    </div>
    <div class="ziyuan-box">
      <div class="ziyuan-title">应急预案</div>
      <div class="ziyuan-main">
        <el-link @click="openPdf(item.url)" style="color: #fff" :underline="true" target="_blank" v-for="(item, index) in fileList" :key="index"
          >{{ item.originalName }}
        </el-link>
      </div>
    </div>
  </div>
  <Plan ref="PlanRef" />
</template>

<style scoped lang="scss">
.blue-box {
  flex: 1;
  position: relative;
  padding: 1.25rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-image: url(@/assets/largescreen/blue-kuang.png);
  background-size: 100% 100%;
  display: flex;
  flex-wrap: wrap;

  .ziyuan-box {
    width: 100%;
    flex: 1;

    .ziyuan-title {
      color: #1aecff;
      font-weight: 700;
      height: 10%;
      margin: 4px 0;
    }

    .ziyuan-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      overflow: auto;
      align-items: flex-start;
      margin-top: 14px;

      .resource_item {
        cursor: pointer;
        box-sizing: border-box;
        margin: 8px 0;
        width: 49%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        img {
          width: 2.0625rem;
          height: 2.0625rem;
        }

        .resource_info {
          width: 78%;
          display: flex;
          justify-content: space-between;

          .resource_name {
            width: 200px;
            font-size: 12px;
            font-family:
              PingFang SC-Medium,
              PingFang SC;
            font-weight: 500;
            color: #fff;
            display: flex;
            justify-content: flex-start;
          }

          .resource_name_current {
            color: #07d0f3;
          }

          .resource_num {
            display: flex;
            justify-content: flex-end;
            min-width: 40%;
            font-size: 18px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #0ff;
          }
        }
      }
    }

    .empty-box {
      width: 100%;
      text-align: center;
      color: #00faf2;
      font-weight: 700;
    }
  }
}
</style>
<style lang="scss">
.inline-input {
  position: absolute;
  z-index: 9;
  top: 9%;
  right: 27%;
  width: 10%;

  .el-input__wrapper {
    box-shadow: inset 0 0 0.625rem 0 #045bbd;
    background-color: rgba(30, 109, 235, 0.4);
    border: 0.0625rem solid #045bbd;
    height: 2.1875rem;
    line-height: 2.1875rem;
  }

  .el-input__inner {
    color: white !important;
  }
}
</style>
